<template>
  <div class="x-share">
    <div class="tip-con">
      <p class="flex justify-center">
        <svg-icon name="share-text" class="text" />
      </p>
      <button @click="onClose">我知道了</button>
      <svg-icon name="share-point" class="point" />
    </div>
    <poster-base-view />
  </div>
</template>

<script
  lang="ts"
  setup
  name="XShare"
>
const emit = defineEmits(['unmount'])

const onClose = () => emit('unmount')
</script>

<style
  scoped
  lang="scss"
>
.x-share {
  @apply fixed backdrop-filter backdrop-blur-4 top-0 left-0 right-0 bottom-0 z-10086 text-white;
  background-color: rgba(0, 0, 0, 0.1);

  .tip-con {
    margin-top: 74px;
    text-align: center;

    .text {
      width: 225px;
      height: 31px;
    }

    button {
      width: 91px;
      height: 31px;
      border-radius: 6px;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      margin-top: 9px;

      &:active {
        opacity: 0.6;
      }
    }

    .point {
      @apply absolute;
      width: 62px;
      height: 55px;
      right: 25px;
      top: 16px;
    }
  }
}
</style>
